<template>
  <div id="bar"></div>
</template>
<script>
// import * as echarts from 'echarts'
export default {
  name: 'BarDate',

  mounted() {
    //柱状图
    var barchartDom = document.getElementById('bar')
    var barChart = this.$echarts.init(barchartDom)
    var baroption
    //给methods使用
    this.echartInstance = barChart

    // var cityLists = []
    // var dataLists = []
    baroption = {
      title: {
        text: '中国疫情柱状图'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: []
        }
      ]
    }

    this.$http.get('/covid/querybar').then((res) => {
      console.log(res)
      // console.log(res.data.dataList)
      // console.log(res.data.cityList)

      //方法一
      baroption.xAxis[0].data = res.data.cityList
      baroption.series[0].data = res.data.dataList

      //方法二
      // for (let i in res.data.dataList) {
      //   dataLists[i] = res.data.dataList[i]
      // }
      // for (let j in res.data.dataList) {
      //   cityLists[j] = res.data.cityList[j]
      // }
      //某种意义上来说，数组也是object map<cityList[],datalist[]>
      //data:map<cityList[],datalist[]>
      barChart.setOption(baroption)
    })
    window.addEventListener('resize', this.resizeHandle)
    // 绑定监听事件
    // window.addEventListener('resize', () => {
    //   barChart.resize()
    // })
  },

  methods: {
    // 绑定监听事件
    resizeHandle() {
      // let _this = this
      this.echartInstance.resize()
      // barChart.resize()
    }
  },
  unmounted() {
    console.log('清理内存bar,防止内存泄漏')
    window.removeEventListener('resize', this.resizeHandle)
  }
}
</script>

<style lang="less" scoped>
#bar {
  height: 500px;
}
</style>